<template>
  <view class="itemFooter">
    <view
      v-if="item.status === 2"
      class="btn"
      @click.stop="Emit.$emit('handle', 'evaluate', item)"
    >
      立即评价
    </view>
    <view
      v-if="item.status === -1"
      class="btn"
      @click.stop="Emit.$emit('handle', 'cancal', item)"
    >
      取消订单
    </view>
    <view
      v-if="item.status > -1 && item.is_pay === 1"
      class="btn"
      @click.stop="handle('progress', item)"
    >
      查看进度
    </view>
    <view
      v-if="item.status === 1"
      class="btn on"
      @click.stop="handle('submitServe', item)"
    >
      确认服务完成
    </view>
    <template v-if="[2, 3].includes(item.status)">
      <!-- <view class="btn on" @click.stop="handle('afterSales', item)">
        申请售后
      </view> -->
      <view class="btn on" @click.stop="handle('again', item)"> 再次购买 </view>
    </template>
    <view v-if="item.status === -1" class="btn" @click.stop="handle('pay')">
      立即支付
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: null,
    },

    showEvaluate: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      cancalItem: null,
      show: true,
    };
  },

  methods: {
    async confirmReceipt(item) {
      const res = await this.$allrequest.order.confirm(
        {
          order_id: item.id,
        },
        true
      );

      if (!res.code) {
        this.$utils.showModal("提示", "操作成功！", false, () => {
          this.Emit.$emit("handle", "rest");
        });
        return;
      }

      this.$utils.toast(res.msg);
    },

    handle(type, item) {
      switch (type) {
        case "submitServe":
          this.confirmReceipt(item);
          break;

        case "progress":
          this.$utils.toUrl(
            `/marketing/serviceHome/order/progress/index?id=${item.id}`
          );
          break;

        // case "afterSales":
        //   break;

        case "again":
          this.$utils.toUrl(
            `/marketing/serviceHome/engineer/item/index?id=${item.worker.id}`
          );
          break;

        case "pay":
          this.pay();
          break;

        default:
          break;
      }
    },

    pay() {
      let {
          id: order_id,
          pay_type_list,
          pay_price,
          created_at: createDate,
        } = this.item,
        order_id_list = "",
        pay_type = 1,
        params = {
          payData: {
            order_id,
            order_id_list,
            pay_type,
          },

          backUrl: "/marketing/serviceHome/order/list/index",
          pay_type_list,
          pay_price,
          createDate,
        };

      this.$utils.toUrl(`/other/pay/pay?data=${JSON.stringify(params)}`);
    },
  },
};
</script>

<style lang="less" scoped>
.itemFooter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;

  .btn {
    margin: 24rpx 0 0 24rpx;
    padding: 12rpx 24rpx;
    border-radius: 32px;
    border: 2rpx solid #a1a1a1;
    font-size: 26rpx;
    color: #262626;

    &.on {
      border-color: #f0250e;
      color: #f0250e;
    }
  }
}
</style>
